import {
  Clock20Filled,
  Options20Filled,
  PersonAvailable24Filled,
  Send16Filled,
  ShareAndroid24Filled,
  ToggleLeft48Filled,
} from "@vicons/fluent";
import { Ref } from "vue";
import { DesignNode } from "../types/index";
import * as htmlToImage from "html-to-image";

let isAddNodeMenu = ref(false); //新增菜单控制
let x: Ref<number> = ref(0); //新增菜单x坐标
let y = ref(0); //新增菜单y坐标
let currentNodeId: Ref<string> = ref(""); //当前需要新增的id
let flowDesignNodes = reactive([
  {
    id: "A00001",
    type: "ROOT",
    name: "发起流程",
  },
  {
    id: "A00002",
    type: "APPROVAL",
    name: "审批人",
  },
  {
    id: "A00003",
    type: "CONDITIONS",
    name: "添加条件",
    children: [
      [
        {
          id: "90aasvbsh8a0a7f234234",
          type: "APPROVAL",
          name: "条件1",
        },
        {
          id: "A00009",
          type: "APPROVAL",
          name: "审批人",
        },
      ],
      [
        {
          id: "900aasvbsh08a0a7f2342340",
          type: "APPROVAL",
          name: "条件2",
        },
        {
          id: "A00007",
          type: "APPROVAL",
          name: "审批人",
        },
        {
          id: "A00009",
          type: "APPROVAL",
          name: "审批人",
        },
      ],
      [
        {
          id: "90bsh8a0a7f10954",
          type: "APPROVAL",
          name: "条件2",
        },
      ],
      [
        {
          id: "90bsh8a0a237f109541",
          type: "APPROVAL",
          name: "其它情况",
        },
      ],
    ],
  },
  {
    id: "A00004",
    type: "CONCURRENTS",
    name: "添加分支",
    children:[
      [
        {
          id: "90aasvb212578234234",
          type: "APPROVAL",
          name: "分支1",
        },
      ],
      [
        {
          id: "900aasv2355667787442340",
          type: "APPROVAL",
          name: "分支2",
        },
      ],
    ]
  },
  {
    id: "A00005",
    type: "APPROVAL",
    name: "审批人",
  },
  {
    id: "A00005",
    type: "APPROVAL",
    name: "审批人",
  },
])

let vertical = ref(true); //横排竖排

const changeVertical = (flag:boolean)=>{
  vertical.value = flag;
}

let isVieJson = ref(false)
let viewJsonCode = ref('');

const showViewJosn = (code:string)=>{
  isVieJson.value = true;
  viewJsonCode.value = code;
}
const addDesignNode = (node: DesignNode) => {
  // 添加节点
  let index = flowDesignNodes.findIndex((item: DesignNode) => {
    return item.id == currentNodeId.value;
  });
  if (index >= 0) {
    flowDesignNodes.splice(index + 1, 0, node);
  } else {
    if (currentNodeId.value) flowDesignNodes.unshift(node);
  }
  isAddNodeMenu.value = false;
  currentNodeId.value = "";
};

const delDesignNode = (id: string) => {
  //删除节点
  let index = flowDesignNodes.findIndex((item: DesignNode) => {
    return item.id == currentNodeId.value;
  });
  flowDesignNodes.splice(index + 1, 1);
};
//节点类型,ROOT(发起人，根节点)、APPROVAL(审批)、CC(抄送)、CONDITIONS(条件组)、CONCURRENTS（并行节点组）、CONDITION(条件子分支)、CONCURRENT（并行子分支）、DELAY(延时节点)、TRIGGER(触发器)、EMPTY(空节点，占位)
const flowNodeTheme: { [key: string]: any } = {
  ROOT: [],
  APPROVAL: [PersonAvailable24Filled, "#FF943E"],
  CC: [Send16Filled, "3296FA"],
  CONDITIONS: [ShareAndroid24Filled, "#15BC83"],
  CONCURRENTS: [Options20Filled, "#718DFF"],
  DELAY: [Clock20Filled, "#F25643"],
  TRIGGER: [ToggleLeft48Filled, "#79C612"],
  EMPTY: [],
};

const nodeTypeForValue: { [key: string]: string } = {
  APPROVAL: "审批人",
  CC: "抄送人",
  CONDITIONS: "",
  CONCURRENTS: "",
  DELAY: "",
  TRIGGER: "触发器",
};

const setCurrentNodeId = (id: string) => {
  // 设置当前选中节点id
  //设置当前点击添加节点的节点id
  currentNodeId.value = id;
};

const showAddMenu = (x_: number, y_: number, flag: boolean) => {
  //显示弹窗菜单
  isAddNodeMenu.value = flag;
  if (flag) {
    x.value = x_;
    y.value = y_;
  } else {
    currentNodeId.value = "";
  }
};
let flowdesignImage = ref('')
const saveImage = (viewDom:HTMLElement) => { // 保存图片
  return htmlToImage
    .toPng(viewDom, { cacheBust: true })
    .then((dataUrl) => {
      flowdesignImage.value = dataUrl;
      return dataUrl
    });
};

export {
  isAddNodeMenu,
  x,
  y,
  showAddMenu,
  flowDesignNodes,
  flowNodeTheme,
  addDesignNode,
  setCurrentNodeId,
  currentNodeId,
  nodeTypeForValue,
  delDesignNode,
  vertical,
  changeVertical,
  isVieJson,
  viewJsonCode,
  showViewJosn,
  saveImage,
  flowdesignImage
};
